<template>
	<view>
		
		<view class="bg-gradual-blue">
			<!--  搜索 begin-->
			<searchInputTop bgColor="bg-gradual-blue" :height="customBarHeight" @search="search" placeholder="搜索附近景点"></searchInputTop>
			<!-- 搜索 end-->
		</view>		
		
		<view v-if="isInit">
			
			<!--  搜索 begin-->
			<view :style="'height: '+screenTop+'px'">
				
				<!--  输入框 end-->			
				<hchPosition :storeData="list" :markers="markers" :selectPoint="selectPoint" @showdetail='goThere' @changeNear='changeNear'></hchPosition>
				
				<!-- 标题 begin -->
				<view class="cu-bar bg-white main-border">
					<view class="action">
						<scroll-view style='white-space: nowrap;' scroll-x="true" class="flex">
							<button v-for="(item,index) in type_list" :key="index" @tap="changeType(item,index)" :class="'cu-btn sm margin-right'+(typeIndex==index?' bg-blue':'')">{{item.name}}</button>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 搜索 end-->
			
			<!-- 通告栏 begin -->
			<uni-notice-bar v-if="showNotice" showClose single text="您拒绝了位置授权,仅显示景区与避暑山庄间的距离"></uni-notice-bar>
			<!-- 通告栏 begin -->
			
			<!-- 滚动条 begin -->
			<scroll-view :style="'width:100%;height:'+screenBottom+'px'">
				<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" :up="upOption" @down="downCallback" @up="upCallback">
					
					<view class="padding-xs flex align-center" v-if="emptyList&&!isLoading">
						<view class="flex-sub text-center">
							<view class="text-xl padding">
								<text class="text-green text-bold">没有满足条件的景点!!!</text>
							</view>
						</view>
					</view>
					
					<view class="cu-list menu" v-if="!emptyList">				
						
							<view class="cu-item menu-border" v-for="(item,index) in list" v-if="list.length > 0" :key="index">
								<view class="content padding-top-xs" style="width: 400rpx;">
									<view>
										<view class="cu-avatar round sm" :style="'background-image:url('+item.avatar+');'"></view>
										<text class="text-cut">{{item.name}}</text>
									</view>
									<view class="text-gray text-sm flex"> <view class="text-cut">在您{{item.dir}}约 <text :class="'margin-lr-xs '+item.disColor">{{item.dist}}</text> 公里</view></view>
								</view>
								<view class="action">	
									<button class="cu-btn radius sm bg-green margin-left-sm" @tap="changePoint(item.maxLevel,item.lat,item.lng)">
										<text class="cuIcon-locationfill"></text>位置
									</button>	
									<button class="cu-btn radius sm bg-orange margin-left-sm" @tap="openDetail(item)">
										<text class="cuIcon-edit"></text>详情
									</button>
								</view>
							</view>
				
					</view>
				</mescroll-uni>
			</scroll-view>
			<!-- 滚动条 bend -->
			
		</view>		
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>	
	import * as auth from '@/common/authorize.js'
	import * as confirm from '@/common/confirm.js'
	import * as util from '@/common/util.js'
	
	import Vue from 'vue'
	import { mapGetters } from 'vuex';
	
	import hchPosition from "@/components/hch-position/hch-position"
	import searchInputTop from "@/components/search/search-input-top.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin],
		components:{
		        hchPosition,searchInputTop
		}, 
		computed: {
			...mapGetters(['type_list']),
			emptyList(){
				this.list.length==0
			}
		},
		data() {
			return {
				customBarHeight:this.CustomBar,
				//初始化函数
				isInit:false,
				showNotice:false,
				isLoading:true,//加载中
				typeIndex:0,
				type:0,
				//用户个人数据
				lng:0, //经度
				lat:0, //纬度
				distanceL:0,//最近的距离
				//页面数据
				list:[],//列表数据
				//刷新数据
				//上拉刷新配置参数
				upOption: {
					page: {
						size: 8 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关景点'
					},
					textNoMore:'暂无更多景点',
					toTop:{
						offset:200,
						bottom: '160rpx',
					}
				 },
				//地图数据
				markers: [],
				//窗口数据
				user:{name:'景区'},
				selectPoint:false, //是否选择点
				//搜索
				keyword:'',
				screenTop:40*this.vh2px+this.upx2px*100,
				screenBottom:this.s_h_notb-(40*this.vh2px+this.upx2px*100)
			}
		},
		async created() {
			//取得Gps权限
			let _this=this
			
			//取得Gps权限
			auth.checkAndGetGpsAuth({
					success:()=>this.getLocation(),
					fail:()=>{
						this.showNotice=true
						this.lng=117.934751
						this.lat=40.995408
						this.isInit=true
					}
			})
		},
		methods: {
			//取得gps信息并初始化位置
			async getLocation(){
				let _this=this
				auth.getUserLocation().then((res)=>{
					_this.lng=res.lng
					_this.lat=res.lat					
					_this.isInit=true
				}).catch((res)=>{
					uni.showToast({
						icon: 'none',
						title: '获取地理位置出错'
					})
				})
			},
			//数据操作类-------------------------
			search(k){
				this.keyword=k
				this.mescroll.resetUpScroll();
			},
			//页面数据请求事件
			upCallback(page) {
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				
				var params,url
				params={
					"p":pageNum,
					"s":pageSize,
					"type":this.type,
					"tags":[],
					"lng":this.lng,
					"lat":this.lat,
					"k":this.keyword
				}
				
				url='/scenery/page'
				
				_this.$api.post(url,params).then(res => {
					let data=res.data.data;
					
					let curPageData = data.list;
					let curPageLen=curPageData.length;
					let totalSize=data.count;
					
					curPageData.forEach((item)=>{
						item.disColor=util.calColor(item.distance)
					})
					
					_this.tranNetDataToPageData(pageNum,res.data.size,data.list)
					
					_this.mescroll.endBySize(curPageLen, totalSize);
					setTimeout(()=>{
						_this.mescroll.endSuccess(curPageLen)
					},20)
					
				}).catch(error=>{
					console.log(error)
					uni.showToast({
						icon: 'none',
						title: '网络异常'
					})
				})
			},
			//数据转换类-------------------------
			//转换获取数据到页面数据
			tranNetDataToPageData(page,count,list){
				let _this=this
				
				if(page == 1){
					_this.list = [] //如果是第一页需手动置空列表
					_this.markers=[]
				}
								
				let tempList=[]
				let tempMarkers=[]
				list.forEach((item)=>{
					
						item.lat=item.position.lat
						item.lng=item.position.lon
						
						tempList.push({
							id:item.id,
							name:item.name,
							avatar:item.img,
							lat: item.lat,
							lng: item.lng,
							province:item.province,
							city:item.city,
							area:item.area,
							maxLevel:item.maxLevel,
							stypeName:item.stypeName,
							stypeColor:item.stypeColor,
							dist:item.distance.toFixed(1),
							disColor:item.disColor,
							dir:auth.getLocationDirection(this.lat,this.lng,item.lat,item.lng)
						})					
						tempMarkers.push({
							id:item.id,
							latitude: item.lat,
							longitude: item.lng,
							width:30,
							height:30,
							iconPath: item.img,
							callout:{
								content:item.name+" | 路线",
								borderRadius:10,
								padding:10,
								display:"ALWAYS",
							}
						})
				})
				
				_this.list = _this.list.concat(tempList)
				_this.markers=_this.markers.concat(tempMarkers)
				
			},			
			//页面操作类-------------------------
			//到地图某个点
			changePoint(maxLevel,lat,lng){
				this.selectPoint={
						latitude: lat,
						longitude: lng,
						scale:16,
						rand:Math.random()
					}
			},
			openDetail(item){
				uni.navigateTo({
					url:"/pages/scenery/detail?id="+item.id
				})
			},
			goThere(item){
				wx.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng),
					name: item.name,
					address: item.province +'-'+ item.city+'-' +item.area+'-' + item.name,
					scale: 28
				})
			},
			changeNear(distanceL){
				this.distanceL=distanceL
			},
			changeType(type,index){
				if(index!=this.typeIndex){
					this.typeIndex=index
					this.type=type.id
					this.changePoint(28,this.lat,this.lng)
					this.list=[]
					this.markers=[]
					this.$nextTick(()=>{
						this.mescroll.resetUpScroll();
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-border{
		border-top: 1px solid #E7E7E7!important;
		border-bottom: 2px solid #E7E7E7!important;
	}	
	.menu-border{
		border-bottom: 1px solid #E7E7E7!important;
	}
</style>
